import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import Note from '~/components/text/note'
import { InlineCode } from '~/components/text/code'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Create and Deploy a Crystallize E-commerce Site with ZEIT Now',
  description:
    'How to launch an e-commerce site using Next.js and Crystallize on ZEIT Now in minutes.',
  published: '2019-11-15T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-crystallize-with-zeit-now',
  image:
    'https://og-image.now.sh/**Deploy%20Crystallize%20Sites**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fcrystallize.com%2Fstatic%2Fimages%2Flogo_crystallize_symbol.svg&widths=300&widths=350&heights=300&heights=350',
  name: 'Crystallize',
  type: 'site',
  editUrl: 'pages/guides/deploying-crystallize-with-zeit-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Crystallize](https://crystallize.com/) is a super-fast GraphQL based headless e-commerce service with super structured product information management.

In this guide, you will discover how to create a [Crystallize e-commerce site](https://crystallize.now-examples.now.sh/), that uses [Stripe](https://stripe.com/) to process payments, and deploy it with [ZEIT Now](/).

<Image
  src={`${
    process.env.ASSETS
  }/guides/deploying-crystallize-with-zeit-now/teddy-bear-shop.png`}
  width={1350 / 2}
  height={735 / 2}
  oversize
  shadow
/>
<Caption>A screenshot of the example app you will create with this guide.</Caption>

## Step 1: Creating Your API Keys

Create a [Crystallize account](https://crystallize.com/signup). From the Crystallize dashboard, open the menu and select **Settings** then **Access tokens**.

Enter a name and create your token, you will be provided with both an `access-token-id` and an `access-token-secret`. You will not be shown these again, so keep the window open until you have used them in [Step 2](#step-2:set-up-your-crystallize-project).

If you do not already have one, [create a Stripe account](https://dashboard.stripe.com/register). From the Stripe dashboard, locate your API keys from the **Developers** link, you will need both the **Publishable** and **Secret** keys.

Once both sets of keys are available, you can move on to creating your Crystallize project.

## Step 2: Set Up Your Crystallize Project

[Set up a Crystallize project](https://crystallize.com/developers) with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory:

<Snippet dark text="npx @crystallize/cli my-crystallize-project && cd my-crystallize-project" />
<Caption>Initializing a Crystallize project with <Link href="https://www.npmjs.com/package/npx">npx</Link> and moving into the project directory.</Caption>

During the setup, you will be asked a series of questions that will customize the output. Select the following options:

- Teddy bear shop
- Next.js + React
- **Both** ZEIT Now and a payment method
- Stripe
- Configure tokens and API keys now

<Note>
  To select Stripe, navigate using the arrow keys and use the spacebar to select
  before pressing enter to confirm.
</Note>

Once you have selected these options, you will be asked to enter the API keys obtained in [Step 1](#step-1:creating-your-api-keys). Enter the information requested, after this has been completed, you no longer need to access the keys directly from either Crystallize or Stripe.

## Step 3: Adding Your API Keys as Now Secrets

Using [Now CLI](/download), create [Now Secrets](/docs/v2/serverless-functions/env-and-secrets/) to securely store the API keys received. You can find these in the `.env` file created by the project setup in [Step 2](#step-2:set-up-your-crystallize-project).

<Snippet dark text="now secrets add CRYSTALLIZE-ACCESS-TOKEN-ID [your-crystallize-access-token-id]" />
<Caption>
  Adding the <InlineCode>crystallize-access-token-id</InlineCode> as a <strong>Now Secret</strong>.
</Caption>

<Snippet dark text="now secrets add CRYSTALLIZE-ACCESS-TOKEN-SECRET [your-crystallize-access-token-secret]" />
<Caption>
  Adding the <InlineCode>crystallize-access-token-secret</InlineCode> as a <strong>Now Secret</strong>.
</Caption>

<Snippet dark text="now secrets add STRIPE-PUBLISHABLE-KEY [your-stripe-publishable-key]" />
<Caption>
  Adding the <InlineCode>stripe-publishable-key</InlineCode> as a <strong>Now Secret</strong>.
</Caption>

<Snippet dark text="now secrets add STRIPE-SECRET-KEY [your-stripe-publishable-key]" />
<Caption>
  Adding the <InlineCode>stripe-secret-key</InlineCode> as a <strong>Now Secret</strong>.
</Caption>

## Step 4: Deploying Your Crystallize Site with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
